<template>
	<view class="container" style="padding: 24px; box-sizing: border-box;">
		<!-- 顶部栏 -->
		<view class="top-bar">
			<uni-icons type="undo-filled" size="20" class="top-left" @click="goBack">返回</uni-icons>
		</view>

		<!-- 提示文本框 -->
		<view class="text-box-wrapper">
			<view class="text-box">
			</view>
		</view>

		<!-- 按钮区域 -->
		<view class="btn-area">
			<u-cell-group style="width: 92%; border-radius: 15px; overflow: hidden; background-color: white; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);">
				<u-cell
					class="cell"
					icon="setting-fill"
					icon-style="font-size: 22px; color: #71B5A0"
					title="更换下火线"
					title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
					isLink
					url="/pages/low/low?value=l11"
				>
				</u-cell>
				<u-cell
					class="cell"
					icon="setting-fill"
					icon-style="font-size: 22px; color: #71B5A0"
					title="更换低压侧户外刀熔"
					title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
					isLink
					url="/pages/low/low?value=l13"
				></u-cell>
				<u-cell
					class="cell"
					icon="setting-fill"
					icon-style="font-size: 22px; color: #71B5A0"
					title="更换电杆（吊车）"
					title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
					isLink
					url="/pages/low/low?value=l14"
				></u-cell>
				<u-cell
					class="cell"
					icon="setting-fill"
					icon-style="font-size: 22px; color: #71B5A0"
					title="更换电杆（挖机）"
					title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
					isLink
					url="/pages/low/low?value=l15"
				></u-cell>
				<u-cell
					class="cell"
					icon="setting-fill"
					icon-style="font-size: 22px; color: #71B5A0"
					title="更换瓷瓶"
					title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
					isLink
					url="/pages/low/low?value=l16"
				></u-cell>
				<u-cell
					class="cell"
					icon="setting-fill"
					icon-style="font-size: 22px; color: #71B5A0"
					title="树障清理"
					title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
					isLink
					url="/pages/low/low?value=l17"
				></u-cell>
				<u-cell
					class="cell"
					icon="setting-fill"
					icon-style="font-size: 22px; color: #71B5A0"
					title="导线故障处理（带收线）"
					title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
					isLink
					url="/pages/low/low?value=l18"
				></u-cell>
				<u-cell
					class="cell"
					icon="setting-fill"
					icon-style="font-size: 22px; color: #71B5A0"
					title="导线故障处理（不带收线）"
					title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
					isLink
					url="/pages/low/low?value=l19"
				></u-cell>
			</u-cell-group>
<!-- 			<button @click='toLow("l11")' class="btn-item">1.更换下火线</button>
			<button @click='toLow("l13")' class="btn-item">2.低压侧户外刀熔更换</button>
			<button @click='toLow("l14")' class="btn-item">3.电杆更换（吊车）</button>
			<button @click='toLow("l15")' class="btn-item">4.电杆更换（挖机）</button>
			<button @click='toLow("l16")' class="btn-item">5.瓷瓶更换</button>
			<button @click='toLow("l17")' class="btn-item">6.树障清理</button>
			<button @click='toLow("l18")' class="btn-item">7.导线故障处理（带收线）</button>
			<button @click='toLow("l19")' class="btn-item">8.导线故障处理（不带收线）</button> -->
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			goBack() {
				uni.navigateBack();
			},
			// toLow(e) {
			//     uni.navigateTo({
			//         url: `/pages/low/low?value=${e}` // 使用模板字符串和查询参数
			//     })
			// }
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		height: 100%;
	}

	.top-bar {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 60rpx;
		margin-bottom: 20rpx;
	}

	.top-left {
		font-size: 28rpx;
		color: black;
		padding: 0 20rpx;

	}

	.text-box-wrapper {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 60rpx; /* 距离顶部一定的间距 */
	}
	
	.text-box {
		width: 80%; /* 控制文本框宽度 */
		display: flex;
		padding: 2%;
		justify-content: center;
		align-items: center;
		font-size: 38rpx;
		color: black;
		font-style: oblique;
		font-weight: bold;
		letter-spacing: 0.5em;
	}
	

	.btn-area {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-top: 20%; /* 将按钮下移 */
	}
	

	.btn-item {
		margin-bottom: 60rpx;
		width: 80%;
		font-weight: 550;
		background-color: #55ff7f;
	}

	/* 修改u-cell-group样式 */
	:deep(.u-cell-group) {
		border-radius: 15px !important;
		overflow: hidden;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
		background: white !important;
		padding: 10rpx 0;
	}

	/* 修改u-cell样式 */
	:deep(.u-cell) {
		margin: 15rpx 0;
		background: white !important;
		transition: all 0.3s ease;
		padding: 25rpx 30rpx !important;
		height: auto !important;
	}

	:deep(.u-cell__title) {
		font-size: 32rpx !important;
		line-height: 1.5 !important;
	}

	:deep(.u-cell:not(:last-child)) {
		border-bottom: 1px solid rgba(113, 181, 160, 0.2) !important;
		margin-bottom: 8rpx;
	}

	:deep(.u-cell:active) {
		background: rgba(113, 181, 160, 0.08) !important;
		transform: scale(0.98);
	}
</style>